<template>
  <view class="bgc">
    <view v-if="mylist.length>0">
      <view class="card" v-for="item in mylist" :key="item._id">
        <view class="article" @click="toArticle(item)">
          <image :src="item.img[0]" mode="aspectFill"></image>
          <p>{{item.title}}</p>
        </view>
        <p class="time">发布时间：{{item.time}}</p>
        <view class="state">
          <view id="tag">
            <u-tag text="内容发布中" type="success" shape="circle" size="mini" id="tag"></u-tag>
          </view>
        </view>
      </view>
    </view>
    <view class="noArticle" v-else>
      您还没收藏过内容呢，快去主页逛逛吧
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        mylist: [],
        collectionList: []
      }
    },
    // 组件加载时，调用获取我的收藏内容
    async onLoad() {
      this.getMyArticle()
    },
    onPullDownRefresh() {
      this.getMyArticle()
      if (this.mylist.length > 0) uni.stopPullDownRefresh()
    },
    methods: {
      // 获取我收藏的内容
      async getMyArticle() {
        await uniCloud.callFunction({
          name: "userSearch",
          data: {
            openid: this.$store.state.openid
          },
          success: (res) => {
            this.collectionList = res.result.data[0].collection
            uniCloud.callFunction({
              name: "searchCollection",
              data: {
                openid: this.$store.state.openid,
                collection: this.collectionList
              },
              success: (res) => {
                this.mylist = res.result
              }
            })
          }
        })
      },

      // 点击卡片进入内容页
      toArticle(item) {
        uni.navigateTo({
          url: "/pages/article/article?article=" + JSON.stringify(item)
        })
      }
    }
  }
</script>

<style lang="scss">
  .bgc {
    overflow: hidden;
    width: 750rpx;
    background-color: #eee;
    padding-bottom: 50px;
  }

  .card {
    margin: 10px;
    width: 635rpx;
    height: 150px;
    background-color: #fff;
    box-shadow: 0 1px 5px #ccc;
    padding: 20px;
    border-radius: 15px;
    position: relative;

    .article {
      display: flex;

      image {
        flex: 1.5;
        margin: 0 20px 20px 0;
        width: 100px;
        height: 100px;
        border-radius: 15px;
      }

      p {
        flex: 3;
        height: 86px;
        overflow: hidden;
      }
    }

    .time {
      position: absolute;
      right: 23px;
      bottom: 55px;
      font-size: 12px;
      color: #aaa;
    }
  }

  .state {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 650rpx;
    height: 50px;
    border-top: 1px solid #ddd;

    #tag {
      width: 140rpx;
    }

  }

  .noArticle {
    width: 750rpx;
    height: 750px;
    text-align: center;
    line-height: 750rpx;
    background-color: #fff;
    color: #aaa;
  }

  .title {
    margin: 20px 0;

    input {
      border-bottom: 1px solid #ccc;
      // border-radius: 10px;
      padding: 5px 10px;
    }
  }

  .myclass {
    margin: 20px 0;

    input {
      border-bottom: 1px solid #ccc;
      // border-radius: 10px;
      padding: 5px 10px;
    }
  }

  .tips {
    margin: 0 0 10px;

    .tag1 {
      width: 74px;
      height: 45px;
      margin: 0 auto;
    }

    p {
      margin-bottom: 40px;
    }
  }
</style>
